<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
    <div>
        <div class="content" style="background-color:#fff">
            <Transition name="nav">
                <RouterView />
            </Transition>

        </div>

        <div class="wrapper">
            <nav>
                <RouterLink to="/bookshelf" active-class="active">
                    <img src="@/assets/imgs/书架2.png" alt="" v-if="$route.path == '/bookshelf'">
                    <img src="@/assets/imgs/书架1.png" alt="" v-else>

                    <span>书架</span>
                </RouterLink>
                <RouterLink to="/shop" active-class="active">
                    <img src="@/assets/imgs/书本2.png" alt="" v-if="$route.path.includes('/shop')">
                    <img src="@/assets/imgs/书本1.png" alt="" v-else>
                    <span>书城</span>
                </RouterLink>
                <RouterLink to="/category" active-class="active">
                    <img src="@/assets/imgs/分类2.png" alt="" v-if="$route.path == '/category'">
                    <img src="@/assets/imgs/分类1.png" alt="" v-else>
                    <span>分类</span>
                </RouterLink>
                <RouterLink to="/my" active-class="active">
                    <img src="@/assets/imgs/我的2.png" alt="" v-if="$route.path == '/my'">
                    <img src="@/assets/imgs/我的1.png" alt="" v-else>
                    <span>我的</span>
                </RouterLink>
            </nav>
        </div>
    </div>

</template>

<style scoped lang="less">
.nav-enter-active,
.nav-leave-active {
    transition: all 0.2s;
}

.nav-enter-from {
    transform: translateX(100vw);
}

.nav-enter-to,
.nav-leave-from {
    transform: translateX(0);
}

.nav-leave-to {
    transform: translateX(-100vw);
}



.content {
    width: 100vw;
    height: calc(100vh - 60rem);
}

.wrapper {
    height: 60rem;
    width: 100vw;
    border-top: 1rem solid #eee;

    nav {
        width: 100%;
        height: 100%;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rem;
        box-sizing: border-box;


        a {
            color: #999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            img {
                width: 25rem;
                height: 25rem;
            }

            span {
                font-size: 13rem;
            }

            &.active {
                color: #333;
            }
        }
    }
}
</style>